<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>旅游商品 - 爽客网</title>
<%@include file="../common/js.jsp" %>
<%@include file="../common/css.jsp" %>
<script type="text/javascript" src="js/jquery.ying.js"></script>
<link href="css/detail.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<!-- head -->
    <%@include file="../common/header.jsp" %>
    <!-- head--end -->
    
    <!-- wrap-->
    <div class="wrap">
    	<div class="main">
            <!-- content-->
            <div class="m_maininfo">
                <div class="m_info_title clearfix">
                	<h1 class="m_info_title_txt">${product.name}</h1>
                </div>
                <div class="m_info_wrap clearfix">
                	<!--left-->
                	<div class="m_info_left fl">
                    	<!-- lunbo -->
                    	<div class="m_lunbo_wrap clearfix">
                        	<ul class="lunbo_bigpic fl">
                            	<li><img src="${product.image1}" width="444" height="222" /></li>
                                <li><img src="${product.image2}" width="444" height="222" /></li>
                                <li><img src="${product.image3}" width="444" height="222" /></li>
                                <li><img src="${product.image4}" width="444" height="222" /></li>
                            </ul>
                            <ul class="lunbo_smallpic fl">
                            	<li class="current">
                                	<img src="${product.image1}" width="97" height="71" />
                                    <span class="zz_panel"></span>
                                </li>
                                <li>
                                	<img src="${product.image2}" width="97" height="49" />
                                    <span class="zz_panel"></span>
                                </li>
                                <li>
                                	<img src="${product.image3}" width="97" height="49" />
                                    <span class="zz_panel"></span>
                                </li>
                                <li>
                                	<img src="${product.image4}" width="97" height="49" />
                                    <span class="zz_panel"></span>
                                </li>
                            </ul>
                        </div>
                        <!-- lunbo--end -->
                       <!-- calendar-->
                       
                       <!-- calendar--end-->
                    </div>
                    <!--left--end-->
                    <!-- right-->
                    <div class="m_info_right fr">
                    	<div class="p5 det_pro">
                        	<div class="m_info_txt">
                            	<span class="price">爽客价：<strong>¥<em>${product.priceMin}</em></strong></span>
                                <span>市 场 价：<i class="m_market_price">¥${product.priceMarket}</i> </span>
                                <span>支付方式：<c:if test="${product.payFrom=='01'}">在线支付</c:if><c:if test="${product.payFrom=='02'}">景区支付</c:if></span>
                            </div>
                            <form action="toprobuy.htm" method="post" id="tobuy_form">
                            <input type="hidden" value="${product.id}" name="tid"/>
                            <div class="m_book">
                            	<dl>
                                	<dd class="fl">
                                        <div class="m_ticket_price m_product_price clearfix mb10">
                                        	<span class="fl">价格<i class="clrf60 farial ml10 mr10" id="select_price">(¥${product.priceMin})</i></span>
                                            <div class="fl">
                                            	<span class="m_minus"></span><input type="text" class="m_buy_num" value="1" name="count" id="res_nums" /><span class="m_plus"></span>
                                            </div>
                                        </div>
                                        <div class="m_bookbtn_area">
                                        	<a href="javascript:;" class="m_bookbtn" id="tobuy"></a>
                                            <div class="fl">
                       						<a href="javascript:void(0)" class="m_collect_btn"  onclick="keep('${product.id}','product')" >我要收藏</a>
									        <a href="javascript:void(0)" class="m_collect_btn m_recommend" onclick="dianping('${product.id}','product')">我要点评</a>
									                	
                                               
                                            </div>
                                        </div>
                                    </dd>
                                   
                                </dl>
                                <div class="m_otherinfo">
                                    <p>您可先进行预订,客服将在工作时间致电,为您提供咨询服务咨询</p>
                                    <p class="mt10">预订热线：<i class="clrc06 fb">${servicePhone.value}</i></p>
                            	</div>
                            </div>
                             </form>
                        </div>
                        
                    </div>
                    <!--right--end-->
                </div>
            </div>
            <!-- content--end-->
            <div class="m_tj_box">
            	<h1>公告</h1>
                ${product.notice}
            </div>
            <!--manager recommend-->
            <div class="m_tj_box">
            	<h1>产品经理推荐</h1>
                ${product.recommend}
            </div>
            <!--manager recommend--end-->
            
            <!-- detailmenu-->
            <ul class="scroll_nav mb10">
            	<li class="current">
                	<a href="#special">产品特色</a>
                </li>
                <li>
                	<a href="#feeInfo">费用说明</a>
                </li>
                <li>
                	<a href="#notify">重要提示</a>
                </li>
            </ul>
            <!-- detailmenu--end-->
            <!--menushow-->
            <div class="m_secnav_wrap">
            	<a name="special"></a>
            	<h3 class="m_title">
                	<span>产品特色</span>
                </h3>
                <div class="m_box">
                	${product.special}
                </div>
            </div>
            <div class="m_secnav_wrap">
            	<a name="feeInfo"></a>
            	<h3 class="m_title">
                	<span>费用说明</span>
                </h3>
                <div class="m_box">
                   ${product.feeInfo}
                </div>
            </div>
           
            <div class="m_secnav_wrap">
            	<a name="notify"></a>
            	<h3 class="m_title">
                	<span>重要提示</span>
                </h3>
                <div class="m_box">
                   ${product.notify}
                </div>
            </div>
            
                 <!-- dianping -->
            <div class="com_dp_box">
                    	<div class=" dp_scores">
                            <h1 class="title">${product.name }</h1>
                            <p class="dp_nums"><span>${product.name }</span> 共有点评<i class="clrf60">${countAll}</i>个</p>
                            <dl>
                                <dt><span class="txt_tip">总体评价：</span><span class="star_s2 star_s2_${countInt}"></span><i class="ml5 clrc06">${countPJ}分</i></dt>
                                <dd><span class="star_s2 star_s2_5"></span><span class="process_bar"><i style="width:${countBy5/countAll*100}%"></i></span><span class="ml10">${countBy5}条</span></dd>
                                <dd><span class="star_s2 star_s2_4"></span><span class="process_bar"><i style="width:${countBy4/countAll*100}%"></i></span><span class="ml10">${countBy4}条</span></dd>
                                <dd><span class="star_s2 star_s2_3"></span><span class="process_bar"><i style="width:${countBy3/countAll*100}%"></i></span><span class="ml10">${countBy3}条</span></dd>
                                <dd><span class="star_s2 star_s2_2"></span><span class="process_bar"><i style="width:${countBy2/countAll*100}%"></i></span><span class="ml10">${countBy2}条</span></dd>
                                <dd><span class="star_s2 star_s2_1"></span><span class="process_bar"><i style="width:${countBy1/countAll*100}%"></i></span><span class="ml10">${countBy1}条</span></dd>
                            </dl>
                            <a href="#" class=" dp_btn1"><img src="../images/smallpic/btn_3.gif" onclick="dianping('${product.id}','product');" /></a>
                    	</div>
                        <div class="user_comments">
                        	<a name="discussa"></a>
                        	<ul class="user_dp_det">
	                        	<c:forEach items="${dList}" var="discuss">
	                            	<li>
	                                	<div class="com_lr">
	                                        <div class="l_box">
	                                            <a href="#" class="block"><img src="${discuss.imageServer}${discuss.avatar}" class="pic" /></a>
	                                            <span class="name">${discuss.memberName}</span>
	                                        </div>
	                                        <div class="r_box">
	                                        	<p><span class="mr10">总体评价：</span><span class="star_s2 star_s2_${discuss.overall}"></span></p>
	                                            <p>
		                                            <span class="mr30">
		                                            	人气：<c:if test="${discuss.popul==1}">很烂</c:if>
		                                					<c:if test="${discuss.popul==2}">一般</c:if>
							                                	<c:if test="${discuss.popul==3}">还好</c:if>
							                                	<c:if test="${discuss.popul==4}">较好</c:if>
							                                	<c:if test="${discuss.popul==5}">很好</c:if>
		                                            </span>
		                                            <span class="mr30">
		                                          	    娱乐：<c:if test="${discuss.recreation==1}">很烂</c:if>
						                                		<c:if test="${discuss.recreation==2}">一般</c:if>
						                                		<c:if test="${discuss.recreation==3}">还好</c:if>
						                                		<c:if test="${discuss.recreation==4}">较好</c:if>
						                                		<c:if test="${discuss.recreation==5}">很好</c:if>
		                                            </span>
		                                            <span class="mr30">
		                                            	服务：<c:if test="${discuss.serving==1}">很烂</c:if>
						                                	<c:if test="${discuss.serving==2}">一般</c:if>
						                                	<c:if test="${discuss.serving==3}">还好</c:if>
						                                	<c:if test="${discuss.serving==4}">较好</c:if>
						                                	<c:if test="${discuss.serving==5}">很好</c:if>
		                                            </span>
		                                            <span class="mr30">
		                                            	规模：<c:if test="${discuss.proportion==1}">很烂</c:if>
						                                	<c:if test="${discuss.proportion==2}">一般</c:if>
						                                	<c:if test="${discuss.proportion==3}">还好</c:if>
						                                	<c:if test="${discuss.proportion==4}">较好</c:if>
						                                	<c:if test="${discuss.proportion==5}">很好</c:if>
		                                            </span>
	                                            </p>
	                                            <p>${discuss.content}</p>
	                                            <div class="result">
	                                            	<span class="fr">
	                                            		<fmt:formatDate value="${discuss.gmtCreated}" pattern="MM-dd HH:mm" />
	                                            	</span>
	                                            </div>
	                                        </div>
	                                	</div>
	                                </li>
	                            </c:forEach>    
                            </ul>
                        </div>
                    </div>
            <!-- dianping--end -->
            
            
            
            <div class="in_tabs_wrap">
            	 <a id="test"></a>
            	<div class="content_box">
                	 <div class="title">
                     	地图
                     </div>
                     <div class="content">
                     	<div id="baidu_map" style="width: 980px;height: 300px;"></div>
                     </div>
                </div>
            </div>
           
        </div>
    </div>
    <!-- wrap--end-->
    
    <!-- foot-->
    <%@include file="../common/footer.jsp" %>
    <!-- foot--end-->
    <script type="text/javascript">
		$(function(){
			$("#tobuy").click(function(){
				$("#tobuy_form").submit();
			});
			
			$(".m_first").mouseover(function(){
				$(this).next(".m_down_menu").show();
				$(this).css({"z-index":"11"});
				//$(this).parent().siblings().css({"z-index":"7"});
			});
			$(".m_first").mouseout(function(){
				$(this).next(".m_down_menu").hide();
				$(this).css({"z-index":"9"});
			});
			
			$("#udate").change(function(){
				var price = $(this).find("option:selected").attr("price");
				$("#select_price").text("(¥"+price+")");
			});
			
			$("#next_month_btn").click(function(){
				$("#m_calendar_box1").hide();
				$("#m_calendar_box2").show();
			});
			
			$("#prev_month_btn").click(function(){
				$("#m_calendar_box2").hide();
				$("#m_calendar_box1").show();
			});
			
			COOL.showMap("baidu_map","${product.lng}","${product.lat}");
			
		});	
	</script>
</body>
</html>
